<template>
    <div class='approval'>
        <el-card class="box-card" style="margin-top: 110px;">
            <div class='title'>
                {{$t('lenders.title1')}}
            </div>
            <div class='menu-search'> 
                <div class='menu-title'>
                    <!-- 业务ID -->
                    <div class='searchItem'>
                        <span>{{$t('lenders.orderId')}}</span>
                        <el-input v-model='listQuery.orderId' :placeholder="$t('rule.orderId')" size='small'></el-input>
                    </div>
                    <!-- 还款码 -->
                    <div class='searchItem'>
                        <span>{{$t('collDetail.repayCode')}}</span>
                        <el-input v-model='listQuery.payCode' :placeholder="$t('collDetail.ruleCode')" size='small'></el-input>
                    </div>
                    <div class='menu-title-btn' style="margin-left: 20px;">
                        <button type='button' @click='search'>
                            {{$t('btn.query')}}
                        </button>
                        <button type="button" @click="reset">
                            {{$t('btn.reset')}}
                        </button>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card class='box-card' style="margin-top: 10px;margin-bottom: 20px;">
            <div class='title'>
                {{$t('processing.taskList')}}
            </div>
            <el-table
                v-loading="listLoading"
                ref='multipleTable'
                :data='tableData'
                tooltip-effect='dark'
                style='width: 95%; margin-top: 10px;'
                border
                stripe
                size='mini'>
                <!-- 业务ID -->
                <el-table-column
                prop="orderId"
                :label="$t('lenders.orderId')"
                header-align="center"
                align="center">
                </el-table-column>
                <!-- 客户姓名 -->
                <el-table-column
                prop='realName'
                :label="$t('approvalDetail.realName')"
                header-align="center"
                align="center">
                </el-table-column>
                <!-- 手机号 -->
                <el-table-column
                prop='appUserName'
                :label="$t('lenders.phoneNo')"
                header-align="center"
                align="center">
                </el-table-column>
                <!-- 应还金额 -->
                <el-table-column
                prop='repayAmt'
                :label="$t('collDetail.shouldAmt')"
                header-align="center"
                align="center">
                </el-table-column>
                <!-- 订单状态 -->
                <el-table-column
                prop='status'
                :label="$t('approvalDetail.orderStatus')"
                header-align="center"
                align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status=== 3">{{$t('approval.repayments')}}</span>
                    <span v-if="scope.row.status=== 6">{{$t('orderQuery.status6')}}</span>
                    <span v-if="scope.row.status=== 7">{{$t('approvalDetail.status5')}}</span>
                </template>
                </el-table-column>
                <!-- 交易ID -->
                <el-table-column
                width="180"
                prop='tranId'
                :label="$t('collDetail.transID')"
                header-align="center"
                align="center">
                </el-table-column>
                <el-table-column
                fixed="right"
                :label="$t('user.operation')"
                width="120"
                header-align="center"
                align="center">
                <template slot-scope="scope">
                    <!-- 生成还款码 -->
                    <el-button
                    :disabled="disabled"
                    type="primary"
                    size="mini"
                    @click="getCode(scope.row)">{{$t('route.getCode')}}</el-button>
                </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog :title="$t('route.getCode')" :visible.sync="dialogFormVisible" center @close='closeDialog' width="40%">
            <el-tabs v-model="activeName">
                <!-- 结清还款码 -->
                <el-tab-pane :label="$t('collDetail.getCode')" name="first">
                    <el-form :model="getCodeObj" style="width: 100%;">
                        <div v-if="getCodeObj.amount !== ''" style="text-align: center;">
                            <!-- 还款码金额 -->
                            <el-form-item :label="$t('collDetail.AmountRepay')" :label-width="formLabelWidth">
                                <span style="display: inline-block; font-weight: bold;">Rp  {{getCodeObj.amount}}</span>
                            </el-form-item>
                        </div>
                        <el-form-item v-for="(item, index) in getCodeObj.codeInfo" :key="index" :label='item.payType + "&" + item.payBankType' :label-width="formLabelWidth">
                            <el-input v-model="item.paymentCode" auto-complete="off" :disabled="true" size='small'>
                                <!-- 复制 -->
                                <el-button slot="append" @click="copyCode(item.paymentCode)">{{$t('collDetail.copy')}}</el-button>
                            </el-input>
                        </el-form-item>
                        <div v-if="getCodeObj.codeTime !== ''" style="text-align: center;"> 
                            <!-- 剩余有效期 -->
                            <el-form-item :label="$t('collDetail.TermValidity')" :label-width="formLabelWidth">
                                <count-down :left-milli-seconds="getCodeObj.codeTime"></count-down>
                                <!-- <span style="display: inline-block; font-weight: bold;">{{getCodeObj.codeTime}}</span> -->
                            </el-form-item>
                        </div>
                    </el-form>
                    <div style="text-align: center;padding-bottom: 10px;">
                        <!-- 生成还款码 -->
                        <el-button v-if="isGenerate1 === ''" type="primary" @click="getCodeFn(1)">{{$t('route.getCode')}}</el-button>
                        <!-- 重新生成还款码 -->
                        <el-button v-if="isGenerate1 === '1'" type="primary" @click="getCodeFn(2)">{{$t('collDetail.againGetCode')}}</el-button>
                    </div>
                </el-tab-pane>
                <template v-if="this.current.status===6">
                    <!-- 展期还款码 -->
                    <el-tab-pane :label="$t('collDetail.extension')" name="second">
                        <el-form :model="extCodeObj" style="width: 100%;">
                            <div v-if="extCodeObj.amount !== ''" style="text-align: center;">
                                <!-- 还款码金额 -->
                                <el-form-item :label="$t('collDetail.AmountRepay')" :label-width="formLabelWidth">
                                    <span style="display: inline-block; font-weight: bold;">Rp  {{extCodeObj.amount}}</span>
                                </el-form-item>
                            </div>
                            <el-form-item v-for="(item, index) in extCodeObj.codeInfo" :key="index" :label='item.payType + "&" + item.payBankType' :label-width="formLabelWidth">
                                <el-input v-model="item.paymentCode" auto-complete="off" :disabled="true" size='small'>
                                    <!-- 复制 -->
                                    <el-button slot="append" @click="copyCode(item.paymentCode)">{{$t('collDetail.copy')}}</el-button>
                                </el-input>
                            </el-form-item>
                            <div v-if="extCodeObj.codeTime !== ''" style="text-align: center;">
                                <!-- 剩余有效期 -->
                                <el-form-item :label="$t('collDetail.TermValidity')" :label-width="formLabelWidth">
                                    <count-down :left-milli-seconds="extCodeObj.codeTime"></count-down>
                                    <!-- <span style="display: inline-block; font-weight: bold;">{{extCodeObj.codeTime}}</span> -->
                                </el-form-item>
                            </div>
                        </el-form>
                        <div style="text-align: center;padding-bottom: 10px;">
                            <!-- 生成还款码 -->
                            <el-button v-if="isGenerate2 === ''" type="primary" @click="extensionFn(1)">{{$t('route.getCode')}}</el-button>
                            <!-- 重新生成还款码 -->
                            <el-button v-if="isGenerate2 === '1'" type="primary" @click="extensionFn(2)">{{$t('collDetail.againGetCode')}}</el-button>
                        </div>
                    </el-tab-pane>
                    <!-- 部分还款码 -->
                    <el-tab-pane :label="$t('collDetail.partialCode')" name="third">
                        <div v-if="isGenerate3 === '1'">
                            <el-form :model="partCodeObj" style="width: 100%;">
                                <div v-if="partCodeObj.amount !== ''" style="text-align: center;">
                                    <!-- 生成还款码 -->
                                    <el-form-item :label="$t('collDetail.AmountRepay')" :label-width="formLabelWidth">
                                        <span style="display: inline-block; font-weight: bold;">Rp  {{partCodeObj.amount}}</span>
                                    </el-form-item>
                                </div>
                                <el-form-item v-for="(item, index) in partCodeObj.codeInfo" :key="index" :label='item.payType + "&" + item.payBankType' :label-width="formLabelWidth">
                                    <el-input v-model="item.paymentCode" auto-complete="off" :disabled="true" size='small'>
                                        <!-- 复制 -->
                                        <el-button slot="append" @click="copyCode(item.paymentCode)">{{$t('collDetail.copy')}}</el-button>
                                    </el-input>
                                </el-form-item>
                                <div v-if="partCodeObj.codeTime !== ''" style="text-align: center;">
                                    <!-- 剩余有效期 -->
                                    <el-form-item :label="$t('collDetail.TermValidity')" :label-width="formLabelWidth">
                                        <count-down :left-milli-seconds="partCodeObj.codeTime"></count-down>
                                        <!-- <span style="display: inline-block; font-weight: bold;">{{partCodeObj.codeTime}}</span> -->
                                    </el-form-item>
                                </div>
                            </el-form>
                            <div style="text-align: center;padding-bottom: 10px;">
                                <!-- 重新生成还款码 -->
                                <el-button v-if="isGenerate3 === '1'" type="primary" @click="againPartCode">{{$t('collDetail.againGetCode')}}</el-button>
                            </div>
                        </div>
                        <div v-if="isGenerate3 === ''">
                            <el-form :model="getPartCodeObj" :rules="partRules" ref="getPartCodeObj" style="width: 100%;">
                                <!-- 部分还款金额 -->
                                <el-form-item :label="$t('processing.partialAmount')" prop="amt" :label-width="formLabelWidth">
                                    <el-input v-model="getPartCodeObj.amt" auto-complete="off" style="width: 80%;" size='small' @keyup.native="amountLimit"></el-input>
                                </el-form-item>
                            </el-form>
                            <div style="text-align: center;padding-bottom: 10px;">
                                <!-- 生成还款码 -->
                                <el-button v-if="isGenerate3 === ''" type="primary" @click="partCode('getPartCodeObj')">{{$t('route.getCode')}}</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                </template>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import CountDown from 'components/CountDown/index'
import { getApplyToCollect, vaEcho, collectCrtPayCode, collectCrtextendedPayCode } from 'api/collection/processing/index'
export default {
    data() {
        var formAmt = (rule, value, callback) => {
            if (value === '' || value === undefined || value === null) {
                callback(new Error(this.$t('collDetail.minAmt')));
            } else {
                if (this.getPartCodeObj.amt !== '') {
                    if (Number(value) < 100000) {
                        callback(new Error(this.$t('collDetail.minAmt')));
                    }
                }
                callback();
            }
        };
        return {
            disabled: false,
            getPartCodeObj: {
                amt: ''
            },
            partRules: {
                amt: [
                    { required: true, trigger: 'blur', validator: formAmt },
                    { pattern: /^[1-9]\d*000$/, message: this.$t('collDetail.minAmt') }
                ]
            },
            isGenerate1: '',
            isGenerate2: '',
            isGenerate3: '',
            listLoading: false,
            listQuery: {
                orderId: "",//订单号
                payCode: ""
            },
            total: null,
            tableData: [],
            multipleSelection: [],
            activeName: 'first',
            getCodeObj: {
                amount: '',
                codeInfo: [],
                codeTime: ''
            },
            extCodeObj: {
                amount: '',
                codeInfo: [],
                codeTime: ''
            },
            partCodeObj: {
                amount: '',
                codeInfo: [],
                codeTime: ''
            },
            formLabelWidth: '150px',
            dialogFormVisible: false,
            current: {},
        };
    },
    created() {
        if (this.language === 'zh') {
            this.lanStatus = 1;
        } else if (this.language === 'en') {
            this.lanStatus = 2;
        } else {
            this.lanStatus = 3;
        }
        if (this.getCodePage.has(this.$route.path)) {
            this.listQuery = this.getCodePage.get(this.$route.path)
        }
        this.getList();
    },
    computed: {
        ...mapGetters(["elements", "language", "getCodePage"])
    },
    components: {
        CountDown
    },
    methods: {
        // 金额限制
        amountLimit(){
            let val = this.getPartCodeObj.amt;
            val = String(val).replace(/[^\.\d]/g,'');
            val = String(val).replace('.','');
            this.getPartCodeObj.amt = val;
        },
        // 分转天时分
        timeStamp(StatusMinute) {
            var day = parseInt(StatusMinute / 60 / 24);
            var hour = parseInt(StatusMinute / 60 % 24);
            var min = parseInt(StatusMinute % 60);
            StatusMinute = "";
            if (day > 0) {
                StatusMinute = day + this.$t('processing.day');
            }
            if (hour > 0) {
                StatusMinute += hour + this.$t('collDetail.hour');
            }
            if (min > 0) {
                StatusMinute += parseFloat(min) + this.$t('collDetail.minute');
            }
            //三元运算符 传入的分钟数不够一分钟 默认为0分钟，else return 运算后的StatusMinute 
            return StatusMinute == "" ? "0"+this.$t('collDetail.minute'): StatusMinute;
        },
        closeDialog(){
            this.getCodeObj = {
                amount: '',
                codeInfo: [],
                codeTime: ''
            }
            this.extCodeObj = {
                amount: '',
                codeInfo: [],
                codeTime: ''
            }
            this.partCodeObj = {
                amount: '',
                codeInfo: [],
                codeTime: ''
            }
        },
        // 复制还款码
        copyCode(shareLink) {
            var input = document.createElement("input");     // 直接构建input
            input.value = shareLink;   // 设置内容
            document.body.appendChild(input);        // 添加临时实例
            input.select();      // 选择实例内容
            document.execCommand("Copy");     // 执行复制
            document.body.removeChild(input);  // 删除临时实例
            this.$message({
                showClose: true,
                message: this.$t('collDetail.copySuccess'),
                type: 'success'
            });
        },
        getCode(row) {
            // 初始化tabs页
            this.activeName = 'first';
            this.getPartCodeObj.amt = '';
            // 初始化还款码
            this.closeDialog();
            this.current = row;
            let obj = {};
            obj.orderId = row.orderId;
            vaEcho(obj)
            .then(res => {
                if (res.status === 200) {
                    let arr = [];
                    if (res.data.data.length > 0) {
                        res.data.data.forEach(item => {
                            let re = /(?=(?!\b)(\d{3})+$)/g;
                            let str = String(item.orderRepaymentVoucherDto.voucherDtoList[0].amount);
                            item.orderRepaymentVoucherDto.voucherDtoList[0].amount = str.replace(re, ",");
                            arr.push(item.flag);
                            if (item.flag === 'normal') {
                                this.getCodeObj.amount = item.orderRepaymentVoucherDto.voucherDtoList[0].amount;
                                this.getCodeObj.codeInfo = item.orderRepaymentVoucherDto.voucherDtoList;
                                this.getCodeObj.codeTime = Number(item.orderRepaymentVoucherDto.voucherTtl)
                                // this.getCodeObj.codeTime = this.timeStamp(Number(item.orderRepaymentVoucherDto.voucherTtl) / 1000 / 60);
                            }
                            if (item.flag === 'rollover') {
                                this.extCodeObj.amount = item.orderRepaymentVoucherDto.voucherDtoList[0].amount;
                                this.extCodeObj.codeInfo = item.orderRepaymentVoucherDto.voucherDtoList;
                                this.extCodeObj.codeTime = Number(item.orderRepaymentVoucherDto.voucherTtl)
                                // this.extCodeObj.codeTime = this.timeStamp(Number(item.orderRepaymentVoucherDto.voucherTtl) / 1000 / 60);
                            }
                            if (item.flag === 'partial') {
                                this.partCodeObj.amount = item.orderRepaymentVoucherDto.voucherDtoList[0].amount;
                                this.partCodeObj.codeInfo = item.orderRepaymentVoucherDto.voucherDtoList;
                                this.partCodeObj.codeTime = Number(item.orderRepaymentVoucherDto.voucherTtl)
                                // this.partCodeObj.codeTime = this.timeStamp(Number(item.orderRepaymentVoucherDto.voucherTtl) / 1000 / 60);
                            }
                        })
                        if (arr.indexOf('normal') > -1) {
                            this.isGenerate1 = '1';
                        } else {
                            this.isGenerate1 = '';
                        }
                        if (arr.indexOf('rollover') > -1) {
                            this.isGenerate2 = '1';
                        } else {
                            this.isGenerate2 = '';
                        }
                        if (arr.indexOf('partial') > -1) {
                            this.isGenerate3 = '1';
                        } else {
                            this.isGenerate3 = '';
                        }  
                    } else {
                        this.isGenerate1 = '';
                        this.isGenerate2 = '';
                        this.isGenerate3 = '';
                    }
                } else {
                    this.$message({
                        showClose: true,
                        message: res.message,
                        type: 'warning'
                    });
                }
            })
            this.dialogFormVisible = true
        },
        // 结清还款码
        getCodeFn(code) {
            this.$confirm(this.$t('collDetail.isCode'), {
                confirmButtonText: this.$t('btn.confirm'),
                cancelButtonText: this.$t('btn.cancel'),
                type: "warning",
                center: true
            })
            .then(() => {
                let obj = {};
                obj.orderId = this.current.orderId;
                obj.userName = this.current.appUserName;
                obj.flag = 'normal';
                obj.regain = code;
                collectCrtPayCode(obj)
                .then(res => {
                    if( res.data.type === '2'){
                        this.isGenerate1 = '1';
                        this.getCodeObj.codeTime = Number(res.data.data.codeTime)
                        // this.getCodeObj.codeTime = this.timeStamp(Number(res.data.data.codeTime) / 60 / 60);
                        this.getCodeObj.codeInfo = res.data.data.codeInfo;
                        let re = /(?=(?!\b)(\d{3})+$)/g;
                        let str = String(res.data.data.codeInfo[0].amount);
                        res.data.data.codeInfo[0].amount = str.replace(re, ",");
                        this.getCodeObj.amount = res.data.data.codeInfo[0].amount;
                        this.$message({
                            showClose: true,
                            message: this.$t('collDetail.codeSuc'),
                            type: 'success'
                        });
                    } else if( res.data.type === '3') {
                        this.isGenerate1 = '';
                        this.$message({
                            showClose: true,
                            message: this.$t('collDetail.orderInfoError'),
                            type: 'warning'
                        });
                    }
                })
            })
            .catch(() => {
                this.$message({
                    showClose: true,
                    type: "info",
                    message: this.$t('btn.cancel')
                });
            });
        },
        // 展期还款码
        extensionFn(code) {
            this.$confirm(this.$t('collDetail.isCode'), {
                confirmButtonText: this.$t('btn.confirm'),
                cancelButtonText: this.$t('btn.cancel'),
                type: "warning",
                center: true
            })
            .then(() => {
                let obj = {};
                obj.orderId = this.current.orderId;
                obj.userName = this.current.appUserName;
                obj.flag = 'rollover';
                obj.regain = code;
                collectCrtextendedPayCode(obj)
                .then(res => {
                    if( res.data.type === '2') {
                        this.isGenerate2 = '1';
                        this.extCodeObj.codeTime = Number(res.data.data.codeTime)
                        // this.extCodeObj.codeTime = this.timeStamp(Number(res.data.data.codeTime) / 60 / 60);
                        this.extCodeObj.codeInfo = res.data.data.codeInfo;
                        let re = /(?=(?!\b)(\d{3})+$)/g;
                        let str = String(res.data.data.codeInfo[0].amount);
                        res.data.data.codeInfo[0].amount = str.replace(re, ",");
                        this.extCodeObj.amount = res.data.data.codeInfo[0].amount;
                        this.$message({
                            showClose: true,
                            message: this.$t('collDetail.codeSuc'),
                            type: 'success'
                        });
                    } else if( res.data.type === '3') {
                        this.isGenerate2 = '';
                        this.$message({
                            showClose: true,
                            message: this.$t('collDetail.orderInfoError'),
                            type: 'warning'
                        });
                    }
                })
            })
            .catch(() => {
                this.$message({
                    showClose: true,
                    type: "info",
                    message: this.$t('btn.cancel')
                });
            });
        },
        // 部分还款 重新生成还款码
        againPartCode() {
            this.$confirm(this.$t('collDetail.isCode'), {
                confirmButtonText: this.$t('btn.confirm'),
                cancelButtonText: this.$t('btn.cancel'),
                type: "warning",
                center: true
            })
            .then(() => {
                this.getPartCodeObj.amt = '';
                this.isGenerate3 = '';
            })
            .catch(() => {
                this.$message({
                    showClose: true,
                    type: "info",
                    message: this.$t('btn.cancel')
                });
            });
        },
        // 部分还款 生成还款码
        partCode(formName) {
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    this.$confirm(this.$t('collDetail.isCode'), {
                        confirmButtonText: this.$t('btn.confirm'),
                        cancelButtonText: this.$t('btn.cancel'),
                        type: "warning",
                        center: true
                    })
                    .then(() => {
                        let obj = {};
                        obj.orderId = this.current.orderId;
                        obj.userName = this.current.appUserName;
                        obj.flag = 'partial';
                        obj.regain = 2;
                        obj.partPrice = this.getPartCodeObj.amt;
                        collectCrtPayCode(obj)
                        .then(res => {
                            if( res.data.type === '2') {
                                this.isGenerate3 = '1';
                                this.partCodeObj.codeTime = Number(res.data.data.codeTime)
                                // this.partCodeObj.codeTime = this.timeStamp(Number(res.data.data.codeTime) / 60 / 60);
                                this.partCodeObj.codeInfo = res.data.data.codeInfo;
                                let re = /(?=(?!\b)(\d{3})+$)/g;
                                let str = String(res.data.data.codeInfo[0].amount);
                                res.data.data.codeInfo[0].amount = str.replace(re, ",");
                                this.partCodeObj.amount = res.data.data.codeInfo[0].amount;
                                this.$message({
                                    showClose: true,
                                    message: this.$t('collDetail.codeSuc'),
                                    type: 'success'
                                });
                            } else if( res.data.type === '3') {
                                this.isGenerate3 = '';
                                this.$message({
                                    showClose: true,
                                    message: this.$t('collDetail.orderInfoError'),
                                    type: 'warning'
                                });
                            }
                        })
                    })
                    .catch(() => {
                        this.$message({
                            showClose: true,
                            type: "info",
                            message: this.$t('btn.cancel')
                        });
                    });
                } else {
                    return false;
                }
            });
        },
        getList() {
            this.listLoading = true;
            this.$store.dispatch('saveGetCodePage', { path: this.$route.path, listQuery: this.listQuery });
            getApplyToCollect(this.listQuery)
            .then(response => {
                if (response.status === 200) {
                    this.listLoading = false;
                    if (response.data !== '') {
                        let re = /(?=(?!\b)(\d{3})+$)/g;
                        let str = String(response.data.repayAmt)
                        response.data.repayAmt =  str.replace(re, ',');
                        this.tableData = [];
                        this.tableData.push(response.data);
                        if (response.data.status === 3 ||
                        response.data.status === 6 ||
                        response.data.status === 7) {
                            this.disabled = false;
                        } else {
                            this.disabled = true;
                        }
                    } else {
                        this.tableData = [];
                    }
                }
            })
        },
        //查询
        search() {
            this.getList();
        },
        //重置
        reset() {
            this.listQuery.orderId = '';
            this.listQuery.payCode = '';
        }
    }
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
.title {
  line-height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title:before{
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.menu-title {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .searchItem {
    display: flex;
    align-items: center;
    padding: 10px  0;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
      font-size: 12px;
      color: #5f5f61;
      padding-right: 5px;
    }
    div{
      width: 150px;
    }
  }
  .searchItem-date {
    display: flex;
    align-items: center;
    padding: 10px  0;
    b {
      margin: 0 10px;
      font-weight: normal;
      font-size: 12px;
      color: #5f5f61;
    }
    div {
       width: 150px;
    }
  }
    .searchItem-overdue {
        display: flex;
        align-items: center;
        padding: 10px  0;
        div {
            width: 48px;
        }
    }
}
.menu-title-btn {
  padding: 10px 0;
  box-sizing: border-box;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
    &:nth-child(2) {
      background: #ebf5ff;
      color: #20a0ff;
      border: 1px solid #abd5ff;
    }
  }
}
.menu-list {
  padding: 20px 0;
  box-sizing: border-box;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
  }
  button[disabled] {
    padding: 0 20px;
    height: 28px;
    background: #c1e0ff;
    color: #fafbff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
  }
}

.href {
  border-bottom: 1px solid #000;
  cursor: pointer; 
  &:hover {
    color: #20a0ff;
    border-bottom: 1px solid #20a0ff;
  }
}
</style>